<template>
  <div>
    <!--  <h1>查看操作日志</h1>-->
    <div class="layout-card top_box mb-5">
      <div class="flex justify-center p-5">
        <div>
          <div class="input flex mt-2">
            <div>
              <input
                v-model="query.keyword"
                class="input-inner"
                placeholder="请输入..."
                @keyup.enter="getList(true)"
              />
            </div>
            <div>
              <button class="input-suffix" @click="getList(true)">搜 索</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layout-card">
      <div>
        <!-- 功能按钮 -->
        <div>
          <!-- 刷新 -->
          <el-button class="mb-4 color" :loading="query.lst" @click="btnRef()">
            <el-icon :size="16" class="icon-color"><Refresh /></el-icon>
          </el-button>
        </div>
      </div>
      <!--数据-->
      <el-table :data="tableData" border style="width: 100%" row-key="id">
        <el-table-column
          prop="userInfo.nickName"
          label="用户姓名"
          width="280"
        />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="module" label="所属模块" width="280" />
        <el-table-column prop="context" label="操作概要" width="300" />
        <el-table-column prop="ipAddress" label="ip地址" width="280" />
        <el-table-column prop="status" label="操作状态" width="280">
          <template #default="scope">
            <el-tag v-if="scope.row.status == true" type="success">成功</el-tag>
            <el-tag v-if="scope.row.status == false" type="danger">失败</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 常规数据分页开始 -->
      <div class="mt-5 text-right">
        <el-pagination
          v-model::current-page="query.currPage"
          v-model:page-size="query.pageSize"
          :total="pageTotal"
          :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
          layout="prev,pager,next,jumper,sizes,total"
          @size-change="pageSizeChange"
          @current-change="currPageChange"
        />
      </div>
      <!-- 常规数据分页结束 -->
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import { getLog } from "@/api/log.ts";

export default defineComponent({
  name: "viewLogs",
  data() {
    return {
      tableData: [],
      query: {
        // 当前页码
        currPage: 1,
        // 页尺寸
        pageSize: 10,
        // 页总记录数
        // 刷新按钮
        lst: false,
        keyword: ""
      },
      pageTotal: 1
    };
  },
  watch: {
    query() {
      this.getList();
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    btnRef() {
      this.getList();
    },
    async getList() {
      let res = await getLog(
        this.query.currPage,
        this.query.pageSize,
        this.query.keyword
      );
      if (res.code == 200) {
        this.tableData = res.data.records;
        this.pageTotal = res.data.total;
        console.log(this.userList);
      }
    },
    // 数据页码长度变化
    pageSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.query.currPage = 1;
      this.getList();
    },
    // 数据页码变化
    currPageChange(pageIndex) {
      this.query.currPage = pageIndex;
      this.getList();
    }
  }
});
</script>
<style scoped>
.text-right {
  float: right;
}

.manu-over-display::v-deep .vue-treeselect__menu {
  z-index: 1000 !important;
  overflow-y: scroll !important;
}

.input-inner {
  width: 31.875rem;
  height: 3.125rem;
  padding: 0 1.25rem;
  overflow: hidden;
  font-size: 1.125rem;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  appearance: none;
  border: 2px solid rgb(64 158 255);
  border-radius: 0.25rem 0 0 0.25rem;
  outline: none;
}

.input-suffix {
  width: 5.75rem;
  height: 3.125rem;
  font-size: 1.125rem;
  color: #fff;
  cursor: pointer;
  background-color: rgb(64 158 255);
  border: none;
  border-radius: 0 0.25rem 0.25rem 0;
}

.color {
  width: 20px;
  background-color: #000;
}

.color:hover {
  background-color: #606266;
}

.icon-color {
  color: whitesmoke;
}
</style>
